<template>
  <div id="myChart" ref="myChart" style="height: 100%; width: 100%"></div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
// import * as echarts from 'echarts/core';
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

// 接下来的使用就跟之前一样，初始化图表，设置配置项
export default {
  name: "hello",
  props: ["table"],
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      option :{
        title: {
          text: "折线图",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["BP神经网络", "DNN深度学习"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2012", "2013", "2014","2015","2016","2017","2018","2019","2020","2021","2022","2023"]
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: 'BP神经网络',
            type: 'line',
            stack: "Total",
            data: [ 3.5, 3.4, 5.6,1.7,0.4,7.3,9.6,9.4,9.5,7.1,9.6,9.2]
          },
          {
            name: 'DNN深度学习',
            type: 'line',
            stack: "Total",
            data: [6.0, 6.0, 5.7, 5.9, 5.1, 4.2,5.3,5.7,6.3,6.2,6.3,6.2]
            
          }
        ],
      }
    };
  },
  
  mounted() {
    // this.drawLine();
    // console.log(this.option.series[0]);
    // this.option.series=table
  },
  methods: {
    drawLine() {
      var chartDom = document.getElementById("myChart");
      var myChart = echarts.init(chartDom);
      var option;
      option=this.option
      // this.option.series=this.table
      option && myChart.setOption(option);
    },
    getTable(){
      
      this.option.series=this.table
      console.log(this.table);
    }
  },
};
</script>

<style>
</style>



